<html>
<head>
  <title>点击复选框后，展开更多内容</title>
  <script type="text/javascript" src="../../vendor/jquery1.3.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".ss").hide();
      $("#check").click(function(){$(".ss").slideToggle("slow");});
    });
  </script>
  <style type="text/css">
    .th-left{
      font-size:9pt;
      color:black;
      text-align:left;
      background-color:#EFF3FF;
      LINE-HEIGHT: 23px;
      padding-right: 5px;
      padding-left: 5px
    }
  </style>
</head>
<body class="body">
<table border="0" width="100%">
  <tr>
    <td colspan="7" width="100%" class="th">
      <table>
        <tr>
          <td class="th"></td>
          <td class="th">
            <table>
              <tr>
                <td colspan="2" class="th" valign="top">
                  用户注册
                </td>
              </tr>
              <tr>
                <td class="th">
                  用户名:
                </td>
                <td class="th">
                  <input type="text" class="text" size="20"><font color="red">*</font></td>
              </tr>
              <tr>
                <td class="th">密 码:
                </td>
                <td class="th">
                  <input type="password" class="text" size="20">
                  <font color="red">*</font>
                </td>
              </tr>
              <tr>
                <td class="th">
                  密码确认:
                </td>
                <td class="th">
                  <input type="password" class="text" size="20">
                  <font color="red">*</font>
                </td>
              </tr>
              <tr>
                <td class="th">
                  Email:
                </td>
                <td class="th">
                  <input type="text" class="text" size="20">
                  <font color="red">*</font>
                </td>
              </tr>
              <tr>
                <td class="th">
                  高级内容
                </td>
                <td class="th-left">
                  <input type="checkbox" class="checkbox" id="check">
                </td>
              </tr>
            </TABLE>
            <div class="ss">
              <table>
                <tr>
                  <td class="th">
                    性别:
                  </td>
                  <td class="lth">
                    <input type="radio" type="radio" name="sex" value="男">
                    男<input type="radio" name="sex" value="女">
                    女</td>
                </tr>
                <tr>
                  <td class="th">
                    安全问题</td>
                  <td class="lth">
                    <select>
                      <option>
                        asdf
                      </option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="th">
                    回答答案</td>
                  <td class="lth">
                    <input type="text">
                  </td>
                </tr>
                <tr>
                  <td class="th">
                    主页</td>
                  <td class="lth">
                    <input type="text">
                  </td>
                </tr>
                <tr>
                  <td class="th">
                    QQ
                  </td>
                  <td class="lth">
                    <input type="text">
                  </td>
                </tr>
                <tr>
                  <td class="th">
                    身份证号</td>
                  <td class="lth"><input type="text"> </td>
                </tr>
              </table>
            </div>
        <tr>
          <td class="th" colspan="7">
            <input type="submit" value="确认" class="button">
            <input type="reset" value="充填" class="button">
          </td>
        </tr>
        </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>